<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本指令 </title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>

<body>
    <!-- v-cloak 不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除 -->
    <!-- v-cloak 是一个解决初始化慢导致的页面闪动的最佳实践，对于简单地项目很实用 -->
    <div id="app-1" v-cloak>
        {{message}}
        <!--
             v-once 不需要表达式，它是定义它元素或组件只渲染一次，
             包括组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，
             将被视为静态的内容。
             v-once 在业务中也要很少实用，当你需要进一步优化性能，可能用到 
        -->
        <span v-once>{{onceage}}</span>
        <div v-once :class="{'color':isColor}">{{onceage}}</div>
    </div>
    <script>
        var app = new Vue({
            el: '#app-1',
            data: {
                message: 'v-cloak 这个是一段文本',
                onceage: 'v-onve 的文本',
                isColor: true
            }
        })
    </script>
</body>

</html>